
<template>
    <input v-model="data.bar.nav.name" type="text"/>
    <input v-model="title" type="text"/>

    <button @click="stopWatch">停止监听</button>
    <button id="box" @click="doNotStopWatch">恢复监听</button>
</template>

<script setup lang="ts">
import { reactive, watch, watchEffect, ref , watchPostEffect, EffectScheduler } from 'vue';

const title = ref('1')

const data = reactive({
    bar:{
        nav:{
            name : '张三'
        }
    }
})


const stop = watchEffect((clearScope)=>{
    const box = document.querySelector('#box')
    console.log(box);
    console.log(title.value);
})

const stopWatch = () => stop()
const doNotStopWatch = () => stop()

</script>

<style lang='scss' scoped>

</style>
